.color-white {
    color: white;
}

.display-flex {
    display: flex;
}

.display-flex-column {
    display: flex;
    flex-direction: column;
}

.display-none {
    display: none;
}

.display-block {
    display: block;
}

.display-inline-block {
    display: inline-block;
}

.align-self-flex-start {
    align-self: flex-start;
}

.align-self-flex-end {
    align-self: flex-end;
}

.align-self-center {
    align-self: center;
}

.align-self-flex-end {
    align-self: flex-end;
}

.position-absolute {
    position: absolute;
}

.position-relative {
    position: relative;
}

.position-sticky {
    position: sticky;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-flex-end {
    justify-content: flex-end;
}

.justify-content-space-between {
    justify-content: space-between;
}

.align-items-center {
    align-items: center;
}

.align-items-baseline {
    align-items: baseline;
}

.align-items-flex-end {
    align-items: flex-end;
}

.overflow-scroll {
    overflow: scroll;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-move {
    cursor: move;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.flex-grow-1 {
    flex-grow: 1;
}

$gutters: 12, 16, 20, 24, 32, 48, 64, 100, 110, 120, 160;
$directions: top, bottom, left, right;

@each $direction in $directions {
    @each $gutter in $gutters {
        .margin-#{$direction}-#{$gutter} {
            margin-#{$direction}: $gutter + 0px;
        }

        .padding-#{$direction}-#{$gutter} {
            margin-#{$direction}: $gutter + 0px;
        }
    }
}

// .margin-top-12 {
//     margin-top: 12px;
// }

// .margin-top-16 {
//     margin-top: 16px;
// }

// .margin-top-20 {
//     margin-top: 20px;
// }

// .margin-top-24 {
//     margin-top: 24px;
// }

// .margin-top-32 {
//     margin-top: 32px;
// }

// .margin-bottom-20 {
//     margin-bottom: 20px;
// }

// .margin-bottom-24 {
//     margin-bottom: 24px;
// }

// .margin-bottom-64 {
//     margin-bottom: 64px;
// }

// .margin-bottom-32 {
//     margin-bottom: 32px;
// }

// .margin-right-16 {
//     margin-right: 16px;
// }

// .margin-right-32 {
//     margin-right: 32px;
// }

.margin-top-auto {
    margin-top: auto;
}

.margin-bottom-auto {
    margin-bottom: auto;
}

.margin-right-auto {
    margin-right: auto;
}

.margin-left-auto {
    margin-left: auto;
}

// .padding-top-12 {
//     padding-top: 12px;
// }

// .padding-top-16 {
//     padding-top: 16px;
// }

// .padding-top-20 {
//     padding-top: 20px;
// }

// .padding-top-24 {
//     padding-top: 24px;
// }

// .padding-top-32 {
//     padding-top: 32px;
// }

// .padding-bottom-20 {
//     padding-bottom: 20px;
// }

// .padding-bottom-24 {
//     padding-bottom: 24px;
// }

// .padding-bottom-32 {
//     padding-bottom: 32px;
// }

// .padding-right-16 {
//     padding-right: 16px;
// }

.padding-top-auto {
    padding-top: auto;
}

.padding-bottom-auto {
    padding-bottom: auto;
}

.pointer-events-none {
    pointer-events: none;
}

.margin-top--desktop {
    margin-top: 44px;
}

.margin-bottom--desktop {
    margin-bottom: 44px;
}

.text-align-center {
    text-align: center;
}

.text-align-right {
    text-align: right;
}

.text-transform-uppercase {
    text-transform: uppercase;
}

.border-radius {
    border-radius: 4px;
}

.border-radius--sm {
    border-radius: 2px;
}

.opacity-0 {
    opacity: 0;
}

.width-100p {
    width: 100%;
}

.height-100p {
    height: 100%;
}

.overflow-hidden {
    overflow: hidden;
}

.flip-horizontally {
    transform: scaleX(-1);
}

.side-padding-top {
    padding-top: 32px;
}

.side-padding-bottom {
    padding-bottom: 32px;
}

.transform-origin-left-top {
    transform-origin: left top;
}

.transform-origin-left-bottom {
    transform-origin: left bottom;
}

.transform-origin-center-top {
    transform-origin: center top;
}

.transform-origin-right-top {
    transform-origin: right top;
}

.transform-origin-bottom {
    transform-origin: bottom;
}

.user-select-none {
    user-select: none;
}

.white-space-pre-wrap {
    white-space: pre-wrap;
}

.width-100p {
    width: 100%;
}

.writing-mode-vertical-rl {
    writing-mode: vertical-rl;
}

.max-width-850 {
    max-width: 850px;
}

.max-width-1104 {
    max-width: 1104px;
}

.content-box {
    box-sizing: content-box;
}

.color-161616 {
    color: #161616;
}
